<template>
  <div class="speed-container">
    <span class="speed-num">
      {{speedTxt}}
    </span>
    <el-image class="tar-arror" :class="imgCls"  :src="arrorSrc" />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import rArror from '@/assets/other/r-arror.png'
import lArror from '@/assets/other/l-arror.png'
const speedTxt = ref(0)
const arrorSrc = ref(rArror)
const imgCls = reactive({toRight:true,toLeft:false,toHidden:false})
const props = defineProps({
  speed:{
    type:Number,
  }
})
watch(
  () => props.speed,
  (sp) =>{
    dealSpeedVal(sp)
  },
  { immediate: true }
)

speedTxt.value = props.speed

function dealSpeedVal(sp){
  speedTxt.value = sp
  if (sp>0){
    imgCls.toRight=true
    imgCls.toLeft=false
    imgCls.toHidden=false
    arrorSrc.value = rArror
  } else if (sp<0){
    imgCls.toRight=false
    imgCls.toLeft=true
    imgCls.toHidden=false
    arrorSrc.value = lArror
  } else{
    imgCls.toRight=false
    imgCls.toLeft=false
    imgCls.toHidden=true
  }
}

</script>

<style scoped lang="scss">
@keyframes leftToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50px);
  }
}
@keyframes rightToLeft {
  from {
    transform: translateX(50px);
  }
  to {
    transform: translateX(0);
  }
}
.toRight{
  display:block;
  left: 0;
  animation: leftToRight 2s infinite linear;
}
.toLeft{
  display:block;
  right: 0;
  animation: rightToLeft 2s infinite linear;
}
.toHidden{
  display: none;
}
.speed-container{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.speed-num{
  width: 25px;
  height: 20px;
  background-color: #0077ff;
  font-weight: bold;
  color: white;
  line-height: 20px;
  font-size: 14px;
  z-index: 9;
}
.tar-arror{
  position: absolute;
  width: 33px;
  height: 18px;
  left: 0;
  z-index: 1;
}
</style>
